<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <button @click="btnClick">点击</button>
            <cpn ref="aa"></cpn>
            <cpn ref="bb"></cpn>
            <cpn ref="cc"></cpn>
        </div>
        <template id="cpn">
            <div>
                <div>我是子组件</div>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
            /**
                父访问子中的方法和属性
            */
            const app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊'
                },
                methods: {
                    btnClick() {
                        // console.log(this.$children)
                        // this.$children[0].showMessage()
                        // console.log(this.$children[0].name)
                        this.$refs.aa.showMessage()
                    }
                },
                components: {
                    cpn: {
                        template: '#cpn',
                        data() {
                            return {
                                name: '我是子组件'
                            }
                        },
                        methods: {
                            showMessage() {
                                console.log("showMessage")
                            }
                        },
                    }

                }
            })
        </script>
    </body>
</html>